<!-- 告警请求量详情 -->
<template>
	<div class="container">
		<!-- 搜索条件 -->
		<el-form :model="formData" :inline="true" :label-width="100">
			<el-form-item label="业务系统" prop="alarmContext">
				<el-input placeholder="输入错误信息模糊搜索" v-model="formData.alarmContext"></el-input>
			</el-form-item>
			<el-form-item label="告警类型" prop="alarmTypeIds">
				<yd-select
					:config="{
						placeholder: '请选择告警类型',
						api: { name: 'queryAlarmTypeStatisInfo', params: formData },
						selectKey: 'alarmTypeId',
						selectLabel: 'alarmTypeName',
						allOption: false,
						multiple: false,
					}"
					@selectValChange="alarmTypeSelectChange"
				></yd-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
			</el-form-item>
		</el-form>

		<yd-search-form :formData="formData">
			<!-- 自定义input -->
			<yd-search-form-item
				type="customInput"
				@downloadHandler="downloadHandler"
				:config="{
					inputs: [{ k: 'alarmContext', placeholder: '输入告警信息模糊搜索' }],
					searchBtn: true,
					searchHandler: searchHandler,
					downloadBtn: true,
					downloading: downloading,
				}"
			></yd-search-form-item>

			<!-- 告警类型 -->
			<yd-search-form-item
				type="alarmTypeTrend"
				:config="{
					k: 'alarmTypeIds',
					showAllOption: true,
					multip: true,
					params: { ...route.query },
				}"
			></yd-search-form-item>
		</yd-search-form>
		<!-- 告警请求量详情列表 -->
		<YdCard>
			<YdTable
				:formData="formData"
				:tableConfig="tableConfig"
				:tableData="tableData.data"
				@sizeChangeHandler="searchHandler"
				@currentChangeHandler="searchHandler"
				@sortChangeHandler="searchHandler"
			></YdTable>
		</YdCard>
	</div>
</template>

<script lang="tsx" setup name="AlarmReqCountDetail">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import { downloadFromBlob, copyMsg } from '@/utils/common';

import { queryAlarmReqListPage, downloadAlarmReqList } from '@/api/bpm/segment/segment_overview';
import { queryAlarmLevelOptions } from '@/api/search/searchOptions';
// import YdCard from '@/components/YdCard/index';

const instance = getCurrentInstance();
const proxy = instance?.proxy;
const route = useRoute();

// 告警级别
let alarmLevelMap = reactive<anyObj>({});

// 搜索表单数据
const formData = reactive({
	...route.query,
	pageNum: 1,
	pageSize: 10,
	orderByColumn: 'alarmTriggerTime',
	isAsc: 'desc',
	// segmentId:4,
	// startTime: "2023-01-04 00:00:00",
	// endTime:"2023-01-05 00:00:00",
	alarmContext: '',
	alarmTypeIds: '',
});
const queryParams = {};

// 列表配置
const tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '所属网端',
			prop: 'segmentName',
			width: 200,
		},
		{
			label: '告警级别',
			prop: 'alarmLevel',
			width: 100,
			formatter(row: any, val: any) {
				return alarmLevelMap[val];
			},
		},
		{
			label: '告警时间',
			prop: 'alarmTriggerTime',
			width: 160,
			sortable: true,
		},
		{
			label: '告警信息',
			prop: 'alarmContext',
			align: 'left',
		},
		{
			label: '告警来源',
			prop: 'alarmObject',
		},
		{
			label: '操作',
			prop: '',
			width: 60,
			renderXss: (row: any, val: any) => {
				return (
					<i
						class="el-icon-document-copy"
						style="color: #ace7ff;"
						onClick={() => {
							const msg =
								'所属网端：' +
								row.segmentName +
								'\n告警级别：' +
								alarmLevelMap[row.alarmLevel as string] +
								'\n告警时间：' +
								row.alarmTriggerTime +
								'\n告警信息：' +
								row.alarmContext +
								'\n告警来源：' +
								row.alarmObject;
							if (copyMsg(msg)) {
								proxy?.$message.success('复制成功');
							}
						}}
					></i>
				);
			},
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: true,
});
// 列表数据
const tableData = reactive({
	data: [],
});
// 下载状态
const downloading = ref(false);
onMounted(() => {
	queryAlarmLevelOptions().then((res) => {
		res.data.forEach((r: any) => {
			alarmLevelMap[r.id] = r.label;
		});
		searchHandler();
	});
});
// 告警类型改变
function alarmTypeSelectChange(val: any) {
	formData.alarmTypeIds = val;
}

// 搜索
function searchHandler() {
	if (btnFlag) {
		// 重置页数
		formData.pageNum = 1;
	}
	tableConfig.loading = true;
	queryAlarmReqListPage(formData).then((res: ApiResponse) => {
		if (res.code !== 200) {
			return;
		}
		tableConfig.loading = false;
		tableData.data = res.data.data;
		tableConfig.pagination!.total = res.data.total;
	});
}
// 下载
function downloadHandler() {
	const d = JSON.parse(JSON.stringify(formData));
	d.pageNum = undefined;
	d.pageSize = undefined;
	downloading.value = true;
	downloadAlarmReqList(d).then((res) => {
		downloading.value = false;
		downloadFromBlob(res, '告警请求量详情列表').then((o: any) => {
			if (!o.flag) {
				proxy?.$message.warning(o.msg);
			}
		});
	});
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
	margin: 10px;
}
</style>
